// Copyright (c) 2008-2013 Michael Dvorkin and contributors.
//
// Fat Free CRM is freely distributable under the terms of MIT license.
// See MIT-LICENSE file or http://www.opensource.org/licenses/mit-license.php
//------------------------------------------------------------------------------
$color_title: #342d7e;
$color_subtitle: darkslateblue;
$sidebar_width: 210px;

// Common page elements.
//------------------------------------------------------------------------------
.title {
  border-bottom: 1px #eee solid;
  color: $color_title;
  font: {
    size: 17px;
    weight: bold; };
  padding-bottom: 2px;
  margin-top: 6px;
  img {
    position: relative;
    top: 2px; } }

.title_tools {
  float: right;
  margin: 0;
  margin-top: 4px;

  .sorting_options, .create_asset {
    margin-left: 24px;
    display: inline-block;
    vertical-align: top;
  }
}

.subtitle {
  border-bottom: 1px #eee solid;
  color: #2f2f2f;
  font: {
    size: 14px;
    weight: bold; };
  small {
    font-weight: normal;
    font-size: 0.9em;
    padding-left: 5px; }
  a:link, a:visited {
    color: $color_subtitle;
    text-decoration: none; }
  a:hover {
    background: none; };
  &.show_attributes {
    margin-top: 6px; } }

.subtitle_inline_info {
  margin-left: 5px }

.subtitle_tools {
  font-size:  0.9em;
  float: right; }

.radio_box {
  line-height: 20px;
  input {
    position: relative;
    top: -2px; } }

.check_box {
  line-height: 20px;
  input {
    position: relative;
    top: -3px; }
  label {
    font-size: 0.9em; } }

// Main area (page and form).
//------------------------------------------------------------------------------
.tabless {
  margin: auto;
  width: 480px; }

.standalone {
  background: whitesmoke;
  border: 20px lightsteelblue solid;
  margin: 75px auto 6px auto;
  padding: 20px;
  width: 400px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  input[type="text"], input[type="email"], input[type="password"] {
    font-size: 16px;
    padding: 2px;
    width: 355px; }
  input[type="submit"] {
    font-size: 14px; } }

.tabbed {
  padding: 12px 12px 12px 16px; }

.main {
  background: white;
  padding: 8px 15px 15px 15px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px; }

.info {
  padding-top: 12px;
  width: 700px; }

.sidebar {
  color: #3f3f3f;
  font-size: 0.9em;
  padding-top: 1rem;
  }

.form {
  background: white;
  h4 {
    font-size: 18px;
    height: 30px; } }

.tools {
  font-size: 0.9em;
  float: right;
  padding: 0px 0px 0px 4px;
  &#comment_new_tools {
    margin: 8px 0px 0px 0px; } }

.label {
  color: #3f3f3f;
  margin: 8px 0px 0px 0px;
  padding: 0px 8px 0px 0px; }

.top {
  margin: 5px 0px 0px 0px; }

.req, label.required {
  background: image-url("asterisk.gif") no-repeat scroll center right transparent;
  color: navy;
  display: inline-block; }

.required label {
  padding: 0px 8px 0px 0px;
}

.intro {
  color: dimgray;
  padding-top: 5px; }

.section {
  background-color: whitesmoke;
  color: #3f3f3f;
  margin: 0px 0px 2px 0px;
  padding: 4px 15px 8px 15px;
  table {
    width: 500px;
    &.address {
      width: 240px; }
    border-spacing: 0px;
    border-collapse: collapse;
    td {
      vertical-align: top;
      padding: 0px;
      div.input {
        display: inline;
        padding: 3px; }
      img.tooltip-icon {
        display: inline;
        vertical-align: bottom; }
      input, select, textarea {
        width: 240px;
        display: block; }
      input[type="checkbox"], input[type="radio"] {
        display: inline;
        width: auto; }
      label {
        vertical-align: bottom; }
      div.input.check_boxes > span {
        display: block;
        padding-top: 2px;
        input {
          margin-right: 5px; } }
      div.input.radio_buttons > span {
        display: block;
        padding-top: 2px;
        label { vertical-align: middle; margin-left: 5px; }
        input {
          margin-left: 5px; } } } } }

.remote {
  border: 5px lightblue solid;
  background: whitesmoke;
  margin: 0px;
  padding: 0px 10px 0px 10px;
  position: relative;
  a.close {
    display: block;
    background: lightblue;
    border: {
      top: 1px gainsboro solid;
      left: 1px gainsboro solid;
      bottom: 1px grey solid;
      right: 1px grey solid; };
    color: navy;
    cursor: pointer;
    height: 16px;
    margin: 3px;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 0px;
    width: 17px;
    &:hover {
      background: #1e4262;
      color: white; } } }

.buttonbar {
  border-top: 1px gray solid;
  margin: 8px auto;
  padding-top: 8px; }

.section input, .sidebar input, .inline input,
.section select, .sidebar select, .inline select,
.section textarea, .sidebar textarea, .inline textarea {
  margin: 3px 0px 0px 0px;
  vertical-align: middle; }

.cool {
  color: darkgreen; }

.warn {
  color: crimson; }

.urgent {
  color: darkred; }

.black {
  color: black; }

.grayed {
  color: silver !important; }

// Default tag colors
// Override these with your own stylesheets
// TODO: Improve the dark vs light to be smarter/inherited
// TODO: Refactor to a better structure
$dark_strip_text: #111;
$light_strip_text: #EEE;

$bg_color1: #05668D;
$bg_color2: #028090;
$bg_color3: #00A896;
$bg_color4: #02C39A;
$bg_color5: #2A9D8F;
$bg_color6: #B4A6AB;
$bg_color7: #946E83;
$bg_color8: #615055;
$bg_color9: #FFDD4A;


.task .call  { background: $bg_color1; color: $light_strip_text; }
.task .email { background: $bg_color2; color: $light_strip_text; }
.task .follow_up { background: $bg_color3; color: $light_strip_text; }
.task .lunch { background: $bg_color4; color: $light_strip_text; }
.task .meeting { background: $bg_color5; color: $light_strip_text; }
.task .money { background: $bg_color6; color: $dark_strip_text; }
.task .presentation { background: $bg_color7; color: $light_strip_text; }
.task .trip  { background: $bg_color8; color: $light_strip_text; }
.task .other { background: $bg_color9; color: $dark_strip_text; }

.campaign .planned { background: $bg_color1; color: $light_strip_text; }
.campaign .started { background: $bg_color9; color: $dark_strip_text; }
.campaign .completed { background: $bg_color3; color: $light_strip_text; }
.campaign .on_hold { background: $bg_color6; color: $dark_strip_text; }
.campaign .called_off { background: $bg_color2; color: $light_strip_text; }

.lead .new { background: $bg_color9; color: $dark_strip_text; }
.lead .contacted { background: $bg_color3; color: $light_strip_text; }
.lead .converted { background: $bg_color6; color: $dark_strip_text; }
.lead .rejected { background: $bg_color1; color: $light_strip_text; }

.account .affiliate { background: $bg_color1; color: $light_strip_text; }
.account .competitor { background: $bg_color2; color: $light_strip_text; }
.account .customer { background:$bg_color3; color: $light_strip_text; }
.account .partner { background: $bg_color4; color: $light_strip_text; }
.account .reseller { background: $bg_color6; color: $dark_strip_text; }
.account .vendor { background: $bg_color9; color: $dark_strip_text; }

.opportunity .prospecting { background: $bg_color1; color: $light_strip_text; }
.opportunity .analysis { background: $bg_color2; color: $light_strip_text; }
.opportunity .presentation { background:$bg_color3; color: $light_strip_text; }
.opportunity .proposal { background: $bg_color4; color: $light_strip_text; }
.opportunity .negotiation { background: $bg_color5; color: $light_strip_text; }
.opportunity .final_review { background: $bg_color9; color: $dark_strip_text; }
.opportunity .won { background: $bg_color7; color: $light_strip_text; }
.opportunity .lost { background: $bg_color1; color: $light_strip_text; }

.user .admin     { background: $bg_color1; color: $light_strip_text; }
.user .suspended { background: $bg_color3; color: $light_strip_text; }
.user .active    { background: $bg_color6; color: $dark_strip_text; }
.user .signed_up { background: $bg_color9; color: $dark_strip_text; }



.amount {
  background: palegreen;
  color: black;
  font-size: 11px;
  text-align: center;
  padding: 0px 3px 0px 3px;
  -moz-border-radius: {
    topleft: 3px;
    topright: 3px;
    bottomleft: 3px;
    bottomright: 3px; };
  -webkit-border: {
    top-left-radius: 3px;
    top-right-radius: 3px;
    bottom-left-radius: 3px;
    bottom-right-radius: 3px; }; }

.strip {
  background: gainsboro;
  color: black;
  float: left;
  font-size: 11px;
  margin: 0px 6px 0px 0px;
  padding: 1px 4px 1px 3px;
  text-align: right;
  width: 75px;
  border-radius: 2px;
}

// Indentation classes:
//   - indent: for use with strip (regular indentation).
//   - indentslim: for use with avatar and no strip (Contacts).
//   - indentwide: for use with strip + checkbox (Tasks).
//   - indentfull: for use with strip + avatar (Admin/Users).
.indent {
  margin-left: 88px; }

.indentslim {
  margin-left: 38px; }

.indentwide {
  margin-left: 106px; }

.indentfull {
  margin-left: 126px; }

.bucket {
  margin: 0px 0px 10px 0px; }

.prefix {
  width: 30px;
  font-size: 10px; }

.comment {
  background: #f2f2f2;
  border-bottom: 1px gainsboro solid;
  margin: 2px 0px 0px 0px;
  overflow: hidden;
  padding: 4px;
  list-style: none;
  //  -moz-border-radius:
  //    bottomleft: 8px
  //    bottomright: 8px
  //  -webkit-border-radius:
  //    bottom-left-radius: 8px
  //    bottom-right-radius: 8px
  &#comment_new {
    margin: 3px 0px 0px 0px; }
  input[type=text] {
    border: 1px #cfcfcf solid;
    color: grey;
    font-size: 11px;
    margin: 3px 0px 0px 0px;
    padding: 3px;
    width: 500px; }
  .gravatar {
    float: left;
    margin: 3px 10px 3px 3px; }
  .body {
    display: inline;
    font-size: 11px; }
  tt {
    font-size: 10px;
    color: #666666; }
  dt {
    padding: 0px;
    margin: -10px 0px 0px 36px;
    p {
      margin: 10px 0px 0px 0px; } }
  .comment_subscriptions {
    margin-top: 7px;
    margin-left: 4px;
    a {
      font-size: 11px; } } }

.comment textarea, textarea#comment_body {
  font-size: 11px;
  height: 110px;
  margin: 3px 0px 0px 0px;
  padding: 3px;
  width: 500px; }

// Avoid collision with .email CSS class which is used to display Task category strip.
.mail {
  background: #f2f2f2;
  border-bottom: 1px gainsboro solid;
  margin: 2px 0px 0px 0px;
  overflow: hidden;
  padding: 4px;
  list-style: none;
  .gravatar {
    float: left;
    margin: 3px 10px 3px 3px; }
  .subject {
    color: black; }
  .body {
    display: inline;
    font-size: 11px; }
  tt {
    font-size: 10px;
    color: #666666; }
  dt {
    padding: 0px;
    margin: -10px 0px 0px 36px;
    p {
      margin: 10px 0px 0px 0px; } } }

.toggle {
  font-weight: normal; }

#export {
  font-size: 9px;
  margin: 12px 0px 0px 0px; }

#paginate {
  float: right;
  font-size: 10px;
  margin: 4px 0px 0px 0px; }

#paging {
  float: right;
  margin: 7px 5px 0px 0px; }

.confirm {
  background: #cdfecd;
  border-left: 10px palegreen solid;
  font-size: 11px;
  margin: 0px 0px 6px 0px;
  padding: 6px; }

// Single-row lists.
//------------------------------------------------------------------------------
.log {
  padding: 8px 0px 0px 0px;
  h3 {
    color: #2f2f2f;
    margin: 0px 0px 4px 0px;
    padding: 2px 0px 2px 86px;
    &.overdue {
      color: crimson; }
    &.due_asap {
      color: darkred; }
    &.due_today {
      color: darkgreen; } }
  li {
    color: #3f3f3f;
    list-style: none;
    padding: 3px 0px 3px 0px;
    tt {
      color: dimgray;
      font-size: 0.9em; } }
  input[type=checkbox] {
    float: left;
    margin: 0px 4px 0px 0px; } }

// Two-row lists.
//------------------------------------------------------------------------------
.list {
  padding: 8px 0px 7px 0px;
  li {
    border-bottom: 1px #eee dotted;
    color: #3f3f3f;
    list-style: none;
    padding: 6px 0px 6px 0px;
    .gravatar {
      float: left;
      padding: 0px 8px 0px 0px; }
    tt {
      color: dimgray;
    }
    dt {
      color: #3f3f3f;
      padding: 2px 0px 0px 0px; } } }

// Sidebar, filters
//------------------------------------------------------------------------------
.filters, .panel {
  background: snow;
  margin: 0px 0px 12px 0px;
  padding: 6px 8px 6px 8px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;

  .caption {
    border-bottom: 1px #eee solid;
    color: navy;
    font: {
      weight: bold; };
    margin: 4px 0px 5px 0px;
    padding: 2px 0px 2px 0px; }
  }

.filters {
  h4 {
    color: navy;
    font-size: 12px;
    font-weight: bold; }
  input[type=text] {
    margin-bottom: 4px; } }

.panel {
  div {
    margin: 0px 0px 10px 0px; }
  h4 {
    font-size: 1.1em;
    font-weight: bold; }
  li {
    list-style: none;
    padding: 2px 0px 3px 0px;
    dt {
      float: right;
      font-weight: bold; }
    tt {
       }
    &.last {
      border-bottom: none; } }
  &#recently {
    background: floralwhite; }
  &#summary {
    p {
      margin: 4px 0px 4px 0px; } } }

.arrow {
  font-size: 9px;
  padding: 0px 2px 3px 0px; }

.left {
  -moz-border-radius: {
    bottomleft: 9px;
    topleft: 9px; };
  -webkit-border: {
    bottom-left-radius: 9px;
    top-left-radius: 9px; }; }

.right {
  -moz-border-radius: {
    bottomright: 9px;
    topright: 9px; };
  -webkit-border: {
    bottom-right-radius: 9px;
    top-right-radius: 9px; }; }

// Dropdown menu.
//------------------------------------------------------------------------------
.menu {
  background: #f4f5eb;
  border: {
    top: 1px solid #dddddd;
    left: 1px solid #dddddd;
    right: 1px solid #666666;
    bottom: 1px solid #666666; };
  left: 0px;
  padding: 2px 0px;
  position: absolute;
  top: 0px;
  width: 12em;
  -webkit-box-shadow: 10px 10px 15px gainsboro;
  ul {
    list-style: none;
    margin: 0px;
    padding: 0px; }
  li {
    list-style-position: outside; }
  a {
    color: #555555;
    cursor: default;
    display: block;
    margin: 0px 2px;
    outline: none;
    padding: 4px 15px;
    text-decoration: none; }
  ahover: {
    background: mediumblue;
    color: white; }; }

// Star ratings.
//------------------------------------------------------------------------------
// .rating .stars {
//   width: 125px;
//   height: 25px;
//   float: left;
//   background: transparent url('/assets/stars.gif') repeat-x right top;
//   margin-right: 5px;
// }
//
// .rating .clearer {
//   clear: left;
// }
//
// .rating .label {
//   line-height: 16px;
//   font-size: 90%;
// }
//
// .rating .stars .star {
//   width: 25px;
//   height: 25px;
//   cursor: pointer;
//   background: transparent url('/assets/stars.gif') no-repeat 0 0;
//   float: left;
// }
//
// .rating .stars .star.on {
//   background-position: 0 -25px;
// }
//
// .rating.selected .stars .star.on {
//   background-position: 0 -50px;
// }
//
// .rating .stars .star.on.half {
//   background-position: 0 -25px;
//   width: 12px;
//   margin-right: 12px;
// }
//
// .rating.selected .stars .star.on.half {
//   width: 25px;
//   margin-right: 0px;
//   background-position: 0 -50px;
// }

// Admin Tabs

.inline_tabs ul {
  margin: 20px 0;
  li {
    display: inline;
    a {
      display: inline-block;
      background: #fafafa;
      padding: 5px;
      border: 1px solid #bbbbbb;
      margin-right: 5px;
      width: 75px;
      text-align: center;
      color: black; }
    &.selected a {
      background: #1e4262;
      color: white;
      font-weight: bold; } } }

.list li.position {
  cursor: move; }

span.handle img {
  vertical-align: middle;
  margin-right: 5px; }

.tags, .list li dt .tags {
  margin-top: 4px;
  a:link, a:visited, li {
    background-color: #eaeaea;
    color: #333333;
    font-weight: normal;
    padding: 2px 6px 1px 6px;
    margin: 4px 0 3px 4px;
    border: 1px solid #bdbdbd;
    background-image: -webkit-gradient(linear, to right bottom, to right top, color-stop(0, #eaeaea), color-stop(0.7, #f2f2f2));
    background-image: -webkit-linear-gradient(center bottom, #eaeaea 0%, #f2f2f2 70%);
    background-image: -moz-linear-gradient(center bottom, #eaeaea 0%, #f2f2f2 70%);
    background-image: -o-linear-gradient(bottom, #eaeaea 0%, #f2f2f2 70%);
    background-image: -ms-linear-gradient(top, #eaeaea 0%, #f2f2f2 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#f2f2f2',GradientType=0 );
    background-image: linear-gradient(top, #eaeaea 0%, #f2f2f2 70%);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; }
  a:hover {
    background: #dadada; }
  li {
    display:inline;
  }
}

.field_group .list {
  padding-bottom: 30px; }

.fields .subtitle {
  cursor: move; }

.fields .title {
  margin-bottom: 12px; }

ul.tools {
  display: inline;
  li {
    border-right: 1px black solid;
    border-bottom: none;
    padding: 0 4px;
    font-size: 0.8em;
    float: left;
    clear: none; }
  li:last-child {
    border-right: none; } }

.highlight {
  background-color: white;
  .tools {
    visibility: hidden; } }

.mail.highlight,
.comment.highlight {
  background-color: #f2f2f2;
  word-break: break-all; }

.highlight:hover {
  background-color: seashell;
  .tools {
    visibility: visible; } }


table.asset_attributes {
  width: 100%;
  border-spacing: 4px;
  td, th {
    border-bottom: 1px dotted #eee;
    vertical-align: top;
    text-align: left;
  }
  th {
    font-weight: bold;
    width: 18%;
    padding-right: 7px;
    text-align: right;
  }
  td {
    width: 32%;
    color: #202020;
  }
  td.last, th.last {
    border-bottom: none;
  }
}

.spinner {
  margin: 7px 4px 0px 4px;
  float: right;
}

.comment .spinner {
  margin: 5px 4px 0px 4px;
  float: left;
}

.comment .buttons {
  padding-left: 40px;
}

// Jumpbox

.ui-menu-item > a:not(.ui-state-focus) {
  span.jumpbox-highlight {
    background-color: lightyellow;
    font-weight: bold;
  }
}

.ui-state-focus {
  span.jumpbox-highlight {
    background-color: darkgray;
  }
}
